<template>
    <div class="stuHead">
        <div class="classRom">
            <span class="name">全部学生</span>
            <span>共{{ studentTeam.length }}人</span>
            <div class="rig"></div>
        </div>
        <div class="tab_view">
            <div class="tab_option">
                <el-table ref="multipleTable" :data="studentTeam" tooltip-effect="dark" style="width: 100%">
                    <el-table-column type="selection">
                    </el-table-column>
                    <el-table-column prop="name" label="全部成员">
                    </el-table-column>
                    <el-table-column prop="no" label="学号">
                    </el-table-column>
                    <el-table-column prop="account" label="账号">
                    </el-table-column>
                    <el-table-column prop="enterTime" label="加入时间" min-width="150px">
                    </el-table-column>
                    <!-- <el-table-column label="群发私信">
                        <i class="el-icon-chat-dot-square"></i>
                    </el-table-column> -->
                    <el-table-column label="删除成员" show-overflow-tooltip v-if="type != 0">
                        <template slot-scope="scope">
                            <p @click="deleteStudent(scope.row)" style="color: #4d90fe;cursor: pointer;">删除</p>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <div class="pagination">
                <!-- 分页组件 size-change:每页最大变化 current-change:当前最大变化 layout:功能组件 -->
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="PageInfo.page" :page-sizes="[1, 2, 5, 100]" :page-size="PageInfo.pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>

        </div>
    </div>
</template>
<script>
import {postRequest} from "@/utils/api";

export default {
    name: "allMember",
    components: {

    },
    data() {
        return {
            studentTeam: [],
            type: 0,
            // 查询信息实体
            PageInfo: {
                // 查询信息
                courseId: localStorage.getItem("courseId"),
                type: 0,
                // 当前页
                page: 1,
                // 每页最大数
                pageSize: 5,
            },
            // 总记录数
            total: 0,
        }
    },
    methods: {
        // 最大数
        handleSizeChange(newSize) {
            this.PageInfo.pageSize = newSize;
            this.getStudentTeam();
        },
        // pageNum的触发动作
        handleCurrentChange(newPage) {
            this.PageInfo.page = newPage;
            this.getStudentTeam();
        },
        toNav(nav) {
            this.$router.push(nav)
        },
        // 获取学生成员
        getStudentTeam() {
          console.log(this.PageInfo)

          postRequest('/userCourse/getStudent', this.PageInfo).then(res => {
                if (res) {
                    this.studentTeam = res.data.data;
                  console.log(this.studentTeam)
                    this.total = res.data.data.length;
                        this.getTypeByUserId();
                }
              console.log(res)
            })
        },
        // 删除学生
        deleteStudent(item) {
            this.$confirm('', '是否要删除该学生？', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
              const data = {
                userId: item.id,
                courseId: localStorage.getItem("courseId"),
              };
              console.log(item)
                postRequest(`/userCourse/deleteClass`,data).then(res => {
                    if (res) {
                        this.getStudentTeam();
                    }
                })
            }).catch(() => {
            });
        },
      getTypeByUserId() {
        const userId = JSON.parse(localStorage.getItem('UserInfo')).id;
        const courseId = localStorage.getItem('courseId');
        const data = { userId, courseId };
        postRequest('/userCourse/list', data).then(res => {
          if (res) {
            console.log(res)
            this.type= res.data.data.list[0].type;
          }
        })
      },
    },
}
</script>
<style scoped lang="less">
.stuHead {
    flex: 1 1 0%;
    border-radius: 8px;
    border: 1px solid rgb(218, 220, 224);
    width: 850px;
    // margin-left: 295px;

    .classRom {
        padding: 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
</style>